<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>采购订单详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>
<body>
<div id="app" v-cloak class="minWidth" style="padding: 15px;">
    <el-card shadow="never">
        <div slot="header" class="clearfix" style="display:flex; align-items:center; justify-content:space-between;">
            <span>采购订单详情</span>
            <div>
                <el-button size="small" @click="handleBack">返回</el-button>
            </div>
        </div>

        <!-- 顶部统一求购单原信息 -->
        <div v-if="pageAcq" style="margin-bottom: 12px; background:#f9fafb; padding:10px; border-radius:4px;">
            <div style="font-weight: 600; color:#606266; margin-bottom: 6px;">求购单原信息</div>
            <el-descriptions :column="3" size="small" border>
                <el-descriptions-item>
                    <template slot="label">报价编号</template>
                    <span>{{ pageAcq.Acquisition_Unit_Price_SerialNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">商品编号</template>
                    <span>{{ pageAcq.Article_SerialNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">求购总量</template>
                    <span>{{ pageAcq.Total_Quantity }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">已购量</template>
                    <span>{{ pageAcq.Sales_Quantity }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">起订量</template>
                    <span>{{ pageAcq.Start_Quantity }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">步长</template>
                    <span>{{ pageAcq.Unit_Quantity }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">单价</template>
                    <span>{{ pageAcq.Unit_Price }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">联系人</template>
                    <span>{{ pageAcq.Contacts }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">联系电话</template>
                    <span>{{ pageAcq.Contacts_Phone }}</span>
                </el-descriptions-item>
                <el-descriptions-item :span="6">
                    <template slot="label">收货地址</template>
                    <span>{{ formatAcqAddress(pageAcq) }}</span>
                </el-descriptions-item>
            </el-descriptions>
        </div>

        <div v-if="detail">
            <!-- 单条订单详情（参照供应单样式，增加头部状态标签） -->
            <el-card shadow="never" style="margin-bottom: 12px;">
                <div slot="header" class="clearfix">
                    <span>订单 {{ detail.Acquisition_Order_SerialNumber }}</span>
                    <el-tag :type="statusTagType(detail.Row_Status)" style="float:right;">{{
                        formatStatus(detail.Row_Status) }}</el-tag>
                </div>
                <el-descriptions :column="3" size="small" border>
                <el-descriptions-item>
                    <template slot="label">订单编号</template>
                    <span>{{ detail.Acquisition_Order_SerialNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">报价编号</template>
                    <span>{{ detail.Acquisition_Unit_Price_SerialNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">企业流水号</template>
                    <span>{{ detail.Enterprise_Info_SerialNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">交易数量</template>
                    <span>{{ detail.Quantity }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">总金额</template>
                    <span>{{ detail.Amount }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">状态</template>
                    <span>{{ formatStatus(detail.Row_Status) }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">已付金额</template>
                    <span>{{ detail.Paid_Amount }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">剩余金额</template>
                    <span>{{ detail.Remain_Amount }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">装运方式</template>
                    <span>{{ detail.Shipment_Method_SerialNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">运输方式</template>
                    <span>{{ detail.Transport_Method_SerialNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">付款方式</template>
                    <span>{{ detail.Payment_Method_SerialNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">交易流水号</template>
                    <span>{{ detail.Trading_SerialNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">联系人</template>
                    <span>{{ detail.Contacts }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">联系电话</template>
                    <span>{{ detail.Contacts_Phone }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">收货省</template>
                    <span>{{ detail.ProvinceNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">收货市</template>
                    <span>{{ detail.CityNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">收货区</template>
                    <span>{{ detail.CountyNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item :span="3">
                    <template slot="label">详细地址</template>
                    <span>{{ detail.Detailed_Address }}</span>
                </el-descriptions-item>
                <!-- 仅当存在拒绝记录时，在详情中追加一行显示拒绝理由 -->
                <el-descriptions-item v-if="detail.examineLogs && detail.examineLogs.length > 0" :span="3">
                    <template slot="label">拒绝理由</template>
                    <div>
                        <div v-for="(log, idx) in detail.examineLogs" :key="idx" style="line-height: 20px;">{{
                            formatRejectLog(log, idx) }}</div>
                    </div>
                </el-descriptions-item>
                </el-descriptions>
            </el-card>

            <el-card shadow="never" style="margin-top: 14px;">
                <div slot="header" class="clearfix">
                    <span>分阶段付款方案</span>
                </div>
                <el-table :data="stagedPayments" stripe border size="small" style="width: 100%">
                    <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                    <el-table-column prop="Stage_Name" label="阶段" width="120"></el-table-column>
                    <el-table-column prop="Percent" label="金额比（%）" width="140"></el-table-column>
                    <el-table-column prop="Pay_Time" label="付款天数(天)" width="220"></el-table-column>
                    <el-table-column prop="Remark" label="备注" min-width="240" show-overflow-tooltip></el-table-column>
                </el-table>
                <div v-if="!stagedPayments || stagedPayments.length===0" style="padding: 12px; color: #909399;">暂无分阶段付款方案</div>
            </el-card>


            <!-- 操作按钮：仅从采购订单入口显示，且仅在待处理状态显示 -->
            <div v-if="canOperate(detail)" style="margin-top: 12px; text-align:center;">
                <template v-if="detail.Row_Status=='0'">
                    <el-button size="small" type="success" @click="acceptOrder(detail)">通过</el-button>
                    <el-button size="small" type="danger" @click="rejectOrder(detail)">拒绝</el-button>
                </template>
            </div>
        </div>
        <div v-else style="padding: 12px; color: #909399;">未找到订单详情</div>
    </el-card>
</div>

<script type="text/javascript" src="../../../utils/jquery.min.js"></script>
<script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
<script type="text/javascript" src="../../../utils/vue.min.js"></script>
<script type="text/javascript" src="../../../component/elementUI/index.js"></script>
<script type="text/javascript" src="../../../utils/utils.js"></script>
<script type="text/javascript" src="../../../utils/http.js"></script>
<script type="text/javascript" src="../../../utils/components.js"></script>
<script src="./js/details.js"></script>
</body>
</html>